<template>
  <div class="package-intro">
    <h1>公司套餐介绍</h1>

    <section class="assets">
      <h2>资产管理</h2>
      <p><strong>到期日期：</strong>{{ asset.expiryDate }}</p>
      <p><strong>资产数量：</strong>{{ asset.used }} / {{ asset.total }}</p>
      <p><strong>描述：</strong>{{ asset.description }}</p>
    </section>
    <section class="supplies">
      <h2>耗材管理</h2>
      <p><strong>到期日期：</strong>{{ supplies.expiryDate }}</p>
      <p><strong>描述：</strong>{{ supplies.description }}</p>
    </section>
    <section class="storage">
      <h2>资源存储空间</h2>
      <p><strong>已使用：</strong>{{ storage.used }} / {{ storage.total }}</p>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asset: {
        expiryDate: '2034-05-22',
        used: 28,
        total: 10000,
        description: '实现资产全生命周期的管理，解决固定资产账目乱，账实不符，流失严重，闲置率高，养护混乱，利用率低等痛点'
      },
      supplies: {
        expiryDate: '2025-05-25',
        description: '低值用品、办公用品管理、出入库登记，一站式管理，实现耗材精细化管控'
      },
      storage: {
        used: '2.63 MB',
        total: '5 GB'
      }
    };
  }
};
</script>

<style scoped>
.package-intro {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 30px;
  color: #333;
}

h1 {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  color: #1A202C;
  margin-bottom: 30px;
}

section {
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background-color: #F7FAFC;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  font-size: 22px;
  color: #2B6CB0;
  margin-bottom: 15px;
}

p {
  font-size: 16px;
  line-height: 1.6;
  color: #4A5568;
}

strong {
  font-weight: 600;
  color: #2D3748;
}

@media (max-width: 768px) {
  .package-intro {
    margin: 15px;
  }

  h1 {
    font-size: 28px;
  }

  section {
    padding: 15px;
  }
}
</style>
